<template>
<div>
  <header class="header">
    <div>
      <div  class="public">
        <div>
          <img src="http://img2.imgtn.bdimg.com/it/u=2159481810,3897864870&fm=27&gp=0.jpg" alt="">
        </div>
      </div>
    </div>
    <swiper :options="swiperOption" ref="mySwiper" id="_swiper" @click="color">
      <swiper-slide class="color">最新</swiper-slide>
      <swiper-slide>视频</swiper-slide>
      <swiper-slide>版本</swiper-slide>
      <swiper-slide>官方</swiper-slide>
      <swiper-slide>英雄</swiper-slide>
      <swiper-slide>专栏</swiper-slide>
      <swiper-slide>娱乐</swiper-slide>
      <swiper-slide>热点</swiper-slide>
    </swiper>
    <div>
      <img src="../assets/images/glass.png">
    </div>
  </header>
    <!-- swiper地址 -->
    <!-- http://www.swiper.com.cn/api -->
  <swiper class="" :options="swiperOptionbox" ref="mySwiper">
    <swiper-slide class="slides">
      <main class="main">
        <swiper class="sw1" :options="swiperOption1" ref="mySwiper">
          <swiper-slide><img src="../../static/images/banner1.png"/></swiper-slide>
          <swiper-slide><img src="../../static/images/banner2.png"/></swiper-slide>
          <swiper-slide><img src="../../static/images/banner.png"/></swiper-slide>
          <swiper-slide><img src="../../static/images/banner3.png"/></swiper-slide>
          <swiper-slide><img src="../../static/images/banner4.png"/></swiper-slide>
          <!-- <div class="swiper-pagination"  slot="pagination"></div> -->
          <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
        </swiper>
      </main>
      <div class="message">
        <dl v-for = "(v,i) in message" :key="i">
          <dd>
            <h6>{{v.h6}}</h6>
            <p>{{v.p}}</p>
          </dd>
          <dt><img v-bind:src="v.imgUrl" alt=""></dt>
        </dl>
      </div> 
    </swiper-slide>
    <swiper-slide class="slides">
      <nav class="nav">
        <p>
          <img src="../../static/images/one1.png" alt="">
          <span>解说</span>
        </p>
        <p>
          <img src="../../static/images/one2.png" alt="">
          <span>赛事</span>
        </p>
        <p>
          <img src="../../static/images/one3.png" alt="">
          <span>娱乐</span>
        </p>
        <p>
          <img src="../../static/images/one4.png" alt="">
          <span>英雄</span>
        </p>
      </nav>
      <div class="week">
        <p>本周热榜</p>
        <p> > </p>
      </div>
      <main class="_video">
        <swiper class="sw2" :options="swiperOption2" ref="mySwiper">
          <swiper-slide v-for = "(v,i) in message1" :key="i">
            <img :src="v.imgUrl1" class="img1"/>
            <dl>
              <dt><img :src="v.imgUrl2" class="img2"/></dt>
              <dd>
                <input type="text" :value="v.value" readonly/>
                <p>{{v.p}}</p>
              </dd>
            </dl>
          </swiper-slide>
        </swiper>
      </main>
      <div class="week">
        <p>热门解说</p>
        <p> > </p>
      </div>
      <swiper :options="swiperOption3" ref="mySwiper" id="_swiper1">
        <swiper-slide v-for = "(v,i) in message2" :key="i">
          <img :src="v.imgUrl" alt="">
          <p>{{v.p1}}</p>
          <p>{{v.p2}}</p>
          <p>{{v.p3}}</p>
        </swiper-slide>
      </swiper>
      <div class="week">
        <p>短视频</p>
        <p> > </p>
      </div>
      <div class="video1">
        <img src="../../static/images/banner.png" alt="">
        <input type="text" value="《YaYa日记》 专访Bang：MSI在巴黎 我对..." readonly/>
        <div>
          <span>2.8万播放</span>
          <span>换一个</span>
        </div>
      </div>
      <div class="week">
        <p>赛事热门</p>
        <p> > </p>
      </div>
      <div class="video2">
        <img src="../../static/images/banner.png" alt="">
        <input type="text" value="赛事速看LGD vs OMG：OMG轻取LGD拿下年后首胜..." readonly/>
        <div>
          <span>LPL职业联赛</span>
          <span>8119播放</span>
        </div>
      </div>
      <swiper :options="swiperOption4" ref="mySwiper" class="_swiper2">
        <swiper-slide v-for = "(v,i) in message3" :key="i">
          <div class="video3">
            <img :src="v.imgUrl"/>
            <p>{{v.p}}</p>
            <span>{{v.span}}</span>  
          </div>
        </swiper-slide>
      </swiper>
      <div class="week">
        <p>热门娱乐</p>
        <p> > </p>
      </div>
      <swiper :options="swiperOption5" ref="mySwiper" class="border-bottom">
        <swiper-slide v-for = "(v,i) in message5" :key="i">
          <dl class="_dl">
            <dt><img :src="v.imgUrl" alt=""></dt>
            <dd>
              <p>{{v.p1}}</p>
              <p>{{v.p2}}</p>
              <p>{{v.p3}}</p>
            </dd>
          </dl>
        </swiper-slide>
      </swiper>
      <div class="week">
        <p>热门英雄</p>
        <p> > </p>
      </div>
      <swiper :options="swiperOption4" ref="mySwiper" class="_swiper2">
        <swiper-slide v-for = "(v,i) in message4" :key="i">
          <div class="video3">
            <img :src="v.imgUrl"/>
            <p>{{v.p}}</p>
            <span>{{v.span}}</span>  
          </div>
        </swiper-slide>
      </swiper>
      <div class="week">
        <p>全部视频</p>
        <p> > </p>
      </div>
      <div class="videos">
        <div class="allVideo" v-for = "(v,i) in allVideo" :key="i">
          <img src="../../static/images/banner3.png"/>
          <p>{{v.p}}</p>
          <span>{{v.span}}</span>  
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
    </swiper-slide>
  </swiper>
</div> 
</template>

<script>
export default {
  data () {
    return{
      message:[
        {h6:"厄运小姐悬念新皮肤厄运小姐悬念新皮肤 最新消息整理",p:"官方 55.5万订阅",imgUrl:"../../static/images/message1.png"},
        {h6:"每日一笑：喵脏并获!",p:"掌盟@搬砖哥 39.8万阅",imgUrl:"../../static/images/message2.png"},
        {h6:"无状态后续：LPL队伍已确认以后转型辅助位",p:"伐木累@CG大魔王 19.4万阅",imgUrl:"../../static/images/message3.png"},
        {h6:"#每日话题#武装战姬四大形态 你最喜欢哪款？",p:"掌盟 4.5万阅",imgUrl:"../../static/images/message4.png"},
        {h6:"每日一笑：喵脏并获!",p:"官方 55.5万订阅",imgUrl:"../../static/images/message2.png"},
      ],
      message1:[
        {imgUrl1:"../../static/images/banner1.png",imgUrl2:"../../static/images/one1.png",value:"Miss排位日记485期 穿越时间的...",p:"miss 146万播放"},
        {imgUrl1:"../../static/images/banner1.png",imgUrl2:"../../static/images/one1.png",value:"苦笑学堂：20分钟单挑大龙 套路...",p:"苦笑 136.6万播放"},
        {imgUrl1:"../../static/images/banner1.png",imgUrl2:"../../static/images/one1.png",value:"神探苍赛事比比叨叨：Kid退役之战...",p:"小苍 124.4万播放"},
        {imgUrl1:"../../static/images/banner1.png",imgUrl2:"../../static/images/one1.png",value:"神探苍联盟必修课：以为是挖掘机...",p:"小苍 124.2万播放"},
        {imgUrl1:"../../static/images/banner1.png",imgUrl2:"../../static/images/one1.png",value:"神探苍坑爹集锦 17期：塑料组最...",p:"小苍 119.6万播放"},
      ],
      message2:[
        {imgUrl:"../../static/images/one1.png",p1:"小鱼解说",p2:"58个视频",p3:"18分钟前更新"},
        {imgUrl:"../../static/images/one1.png",p1:"7号&笑笑",p2:"141个视频",p3:"29分钟前更新"},
        {imgUrl:"../../static/images/one1.png",p1:"苦笑",p2:"251个视频",p3:"23小时前更新"},
        {imgUrl:"../../static/images/one1.png",p1:"小苍",p2:"765个视频",p3:"昨天更新"},
        {imgUrl:"../../static/images/one1.png",p1:"miss",p2:"480个视频",p3:"昨天更新"},
      ],
      message3:[
        {imgUrl:"../../static/images/banner1.png",p:"3月13日TOP5：Chelly女警一枪爆头帅气双杀",span:"6345播放"},
        {imgUrl:"../../static/images/banner1.png",p:"赛事速看BLG vs SNG：Fury女警火线追击斩三杀",span:"3872播放"},
        {imgUrl:"../../static/images/banner1.png",p:"3月13日TOP5：Chelly女警一枪爆头帅气双杀",span:"6345播放"},
        {imgUrl:"../../static/images/banner1.png",p:"3月13日TOP5：Chelly女警一枪爆头帅气双杀",span:"6345播放"},
        {imgUrl:"../../static/images/banner1.png",p:"3月13日TOP5：Chelly女警一枪爆头帅气双杀",span:"6345播放"},
        {imgUrl:"../../static/images/banner1.png",p:"3月13日TOP5：Chelly女警一枪爆头帅气双杀",span:"6345播放"},
      ],
      message4:[
        {imgUrl:"../../static/images/banner1.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"4.5万播放"},
        {imgUrl:"../../static/images/banner1.png",p:"聚印象TOP秀：一个狗熊教你做人 蛇皮走秀...",span:"2.2播放"},
        {imgUrl:"../../static/images/banner1.png",p:"3月13日TOP5：Chelly女警一枪爆头帅气双杀",span:"2.0播放"},
        {imgUrl:"../../static/images/banner1.png",p:"3月13日TOP5：Chelly女警一枪爆头帅气双杀",span:"1.8播放"},
        {imgUrl:"../../static/images/banner1.png",p:"3月13日TOP5：Chelly女警一枪爆头帅气双杀",span:"1.6播放"},
        {imgUrl:"../../static/images/banner1.png",p:"3月13日TOP5：Chelly女警一枪爆头帅气双杀",span:"8000播放"},
      ],
      message5:[
        {imgUrl:"../../static/images/banner2.png",p1:"每日撸报",p2:"99个视频",p3:"4小时前更新",},
        {imgUrl:"../../static/images/banner2.png",p1:"主播炸了",p2:"86个视频",p3:"8小时前更新",},
        {imgUrl:"../../static/images/banner2.png",p1:"小鱼Top5",p2:"72个视频",p3:"23小时前更新",},
        {imgUrl:"../../static/images/banner2.png",p1:"主播疯人院",p2:"66个视频",p3:"昨天更新",},
        {imgUrl:"../../static/images/banner2.png",p1:"秀你一脸",p2:"38个视频",p3:"前天更新",},
      ],
      allVideo:[
        {imgUrl:"../../static/images/banner2.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"0播放",},
        {imgUrl:"../../static/images/banner2.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"0播放",},
        {imgUrl:"../../static/images/banner2.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"0播放",},
        {imgUrl:"../../static/images/banner2.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"0播放",},
        {imgUrl:"../../static/images/banner2.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"0播放",},
        {imgUrl:"../../static/images/banner2.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"0播放",},
        {imgUrl:"../../static/images/banner2.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"0播放",},
        {imgUrl:"../../static/images/banner2.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"0播放",},
        {imgUrl:"../../static/images/banner2.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"0播放",},
        {imgUrl:"../../static/images/banner2.png",p:"克隆模式 最简单的一个英雄 会按R键就能秀...",span:"0播放",},
      ],
      // 咨询swiperBox
      swiperOptionbox:{
        slidesPerView :'auto',
      },
      // 导航
      swiperOption: {
        slidesPerView: 4.2,
      },
      // banner
      swiperOption1: {
        slidesPerView :'auto',
        autoplay: 1000,
        slidesPerView: 1.4,
        centeredSlides: true,
        // slideToClickedSlide: true,
        // grabCursor: true,
        // history: 'slide',
        loop:true,
        // pagination: '.swiper-pagination',
        // slidesPerView: 1.3,
        // paginationClickable: true,
        spaceBetween: 10,
        // slidesPerView: 1.3,
      },
      swiperOption2:{
        slidesPerView: 1.3,
        freeMode : true,
        // slidesPerView :'auto',
        // slidesPerView : 1.2,
        spaceBetween : 10,
      },
      swiperOption3: {
        slidesPerView: 2.5,
        spaceBetween: 10,
        freeMode : true,
      },
      swiperOption4: {
        slidesPerView: 2,
        spaceBetween: 10,
        freeMode : true,
      },
      swiperOption5: {
        slidesPerView: 1.1,
        // spaceBetween: 10,
        freeMode : true,
      },
    }
  },
  methods:{
    color(){
      // console.log($(this))
    }
  }
}
</script>

<style scoped lang="less">
.px2rem(@name,@px){
  @{name}: @px / 75 * 1rem;
}
.swiper-slide{
  img{
    width:100%;
  }
}
.header{
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content:space-between;
  align-items: center;
  background: #265A96;
  // box-shadow: 0 3px 5px #ccc;
  .px2rem(font-size,30);
  &>div:first-child{
    position: relative;
    z-index: 999;
    width:45px;
    height:45px;
    .px2rem(margin-left,30);
    .px2rem(margin-right,5);
    display: flex;
    align-items: center;
    .public{
      width:35px;
      height:35px;
      img{
        border-radius: 50%;
        width:100%;
      }
    }
  }
  #_swiper{
    flex:1;
    .swiper-slide{
      // text-align:center;
      line-height:44px;
      color:white;
    }
  }
  &>div:last-child{
    width:45px;
    height:45px;
    .px2rem(padding-right,10);
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 30px;
      height:30px;
    }
  }  
}
// one
.main{
  background: #265A96;
  .sw1{
    .swiper-slide{
      img{
        width:100%;
      }
    }
  }
}
.message{
  padding-bottom: 55px;
  dl{
    display: flex;
    .px2rem(padding-top,25);
    .px2rem(padding-bottom,25);
    .px2rem(margin-left,30);
    .px2rem(margin-right,30);
    border-bottom:1px solid #ccc;
    dt{
      .px2rem(width,200);
      .px2rem(padding-left,20);
      img{
        width:100%;
        border:1px solid #999;
        .px2rem(border-radius,5);
      }
    }
    dd{
      position: relative;
      flex:1;
      h6{
        .px2rem(font-size,30);
        .px2rem(line-height,40);
        .px2rem(letter-spacing,2);
      }
      p{
        position: absolute;
        bottom: 0;
        left:0;
        .px2rem(font-size,20);
        .px2rem(line-height,70);
        color:gray;
      }
    }
  }
}
.message>dl:active{
  background: #f0f0f0;
  box-shadow:-20px 0 20px #f0f0f0,20px 0 20px #f0f0f0;
}
// two
.nav{
  display:flex;
  justify-content: space-between;
  align-items: center;
  .px2rem(height,90);
  border-bottom: 1px solid #ccc;
  p{
    flex:1;
    display:flex;
    justify-content: center;
    align-items: center;
    img{
      .px2rem(width,65);
      border-radius: 50%;
      .px2rem(margin-right,5);
    }
    span{
      .px2rem(padding-left,5);
      .px2rem(font-size,20);
      .px2rem(letter-spacing,1);
    }
  }
}
.color{
  color:#D3AA71 !important;
}
.week{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .px2rem(height,80);
  .px2rem(padding-left,30);
  .px2rem(padding-right,30);
  .px2rem(font-size,30);
}
._video{
  .px2rem(margin-left,30);
  .px2rem(margin-right,30);
  border-bottom: 1px solid #ccc;
  .swiper-slide{
    .img1{
      width:100%;
      .px2rem(border-radius,8);
    }
    dl{
      display: flex;
      .px2rem(padding-top,20);
      .px2rem(padding-bottom,20);
      dt{
        .px2rem(width,70);
        border-radius: 50%;
        img{
          width:100%;
        }
      }
      dd{
        .px2rem(margin-left,30);
        flex:1;
        position: relative;
        input{
          position: absolute;
          top:0;
          left:0;
          width:100%;
          border:none;
          background: none;
          .px2rem(font-size,30);
        }
        p{
          position: absolute;
          bottom:0;
          left:0;
          .px2rem(font-size,20);
          color:#999;
        }
      }
    }
  }
}
#_swiper1{
  .px2rem(margin-left,30);
  .px2rem(margin-right,30);
  .swiper-slide{
    display: flex;
    flex-direction: column;
    align-items:center;
    color:white;
    .px2rem(border-radius,10); 
    img{
      .px2rem(width,70);
      .px2rem(padding-top,15);
      .px2rem(padding-bottom,8);
      border-radius: 50%;
    }
    &>p:first-child,&>p:last-child{
      .px2rem(font-size,22);
      .px2rem(padding-top,8);
      .px2rem(padding-bottom,8);
    }
    &>p:nth-child(2){
      .px2rem(font-size,20);
      .px2rem(padding-top,8);
      .px2rem(padding-bottom,8);
    }
    &>p:last-child{
      .px2rem(padding-bottom,15);
    }
  }
  .swiper-slide:first-child{
    background: linear-gradient(#0E8A99,#89D1D8);
  }
  .swiper-slide:nth-child(2){
    background: linear-gradient(#376BB7,#0e8a99);
  }  
  .swiper-slide:nth-child(3){
    background: linear-gradient(#6A509C,#9B7ED3);
  }  
  .swiper-slide:nth-child(4){
    background: linear-gradient(#777,#ccc);
  }  
  .swiper-slide:last-child{
    background: linear-gradient(#999,#f0f0f0);
  }  
}
.video1{
  .px2rem(margin-left,30);
  .px2rem(margin-right,30);
  .px2rem(padding-bottom,30);
  display: flex;
  flex-direction: column;
  border-bottom:1px solid #ccc;
  img{
    .px2rem(border-radius,10);
  }
  input{
    width:100%;
    border:none;
    outline:none;
    background: transparent;
    .px2rem(font-size,30);
    .px2rem(line-height,70);
  }
  div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .px2rem(font-size,20);
    &>span:first-child{
      color:#666;
    }
    &>span:last-child{
      color:blue;
    }
  }
}
.video2{
  .video1;
  border:none;
  div{
    justify-content: flex-start;
    &>span:last-child{
      color:#666;
      .px2rem(padding-left,50);
    }    
  }
}
._swiper2{
  .px2rem(margin-left,30);
  .px2rem(margin-right,30);
  .px2rem(padding-bottom,30);
  border-bottom:1px solid #ccc;
  .video3{
    display: flex;
    flex-direction: column;
    img{
      width:100%;
      .px2rem(border-radius,10);
    }
    p{
      .px2rem(font-size,30);
      .px2rem(padding-top,15);
      .px2rem(padding-bottom,15);
    }
    span{
      color:#666;
    }
  }
}
.border-bottom{
  border-bottom:1px solid #ccc;
  .px2rem(margin-left,30);
  .px2rem(margin-right,30);
  .px2rem(padding-bottom,30);
  ._dl{
    display: flex;
    dt{
      width:45%;
      img{
        width:100%;
        .px2rem(border-radius,15);
      }
    }
    dd{
      .px2rem(padding-left,20);
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &>p:first-child{
        .px2rem(font-size,30);
      }
      &>p:nth-child(2){
        .px2rem(font-size,21);
      }
      &>p:last-child{
        .px2rem(font-size,20);
        color:#666;
      }        
    }
  }
}
.videos{
  .px2rem(padding-left,30);
  .px2rem(padding-right,30);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .allVideo{
    .px2rem(padding-bottom,20);
    width:48%;
    display: flex;
    flex-direction: column;
    img{
      width:100%;
      .px2rem(border-radius,10);
    }
    p{
      .px2rem(font-size,30);
      .px2rem(padding-top,15);
      .px2rem(padding-bottom,15);
    }
    span{
      color:#666;
    }
  }
  .allVideo:nth-of-type(1n){
    padding-right:1%;
  }  
  .allVideo:nth-of-type(2n){
    padding-left:1%;
  }
}
</style>
